<template>
  <div class="map-demo">
    <div class="buttons">
      <button @click="WeatherWarningLayer">气象预警</button>
      <button @click="removeWeatherWarningLayer">删除气象预警</button>
      <button @click="TyphoonLayer">台风路径</button>
      <button @click="removeTyphoonLayer">删除台风路径</button>
      <button @click="CloudLayer">云图</button>
      <button @click="removeCloudLayer">删除云图</button>
      <button @click="CloudAnimation">重播云图动画</button>
      <div v-if="layers['cloudLayer']">云图时间：{{layers['cloudLayer'].dateTime}}</div>
      <button @click="RadarLayer">雷达</button>
      <button @click="removeRadarLayer">删除雷达</button>
      <button @click="RadarAnimation">重播雷达动画</button>
      <div v-if="layers['radarLayer']">雷达时间：{{layers['radarLayer'].dateTime}}</div>
      <button @click="BanksLayer">堤围</button>
      <button @click="removeBanksLayer">删除堤围</button>
      <button @click="CriticalsLayer">险段</button>
      <button @click="removeCriticalsLayer">删除险段</button>
      <button @click="DikeEngineeringLayer">堤上在建工程</button>
      <button @click="removeDikeEngineeringLayer">删除堤上在建工程</button>
      <button @click="midRiverLandLayer">江心洲</button>
      <button @click="removeMidRiverLandLayer">删除江心洲</button>
      <button @click="theBundLandLayer">外滩地</button>
      <button @click="removeTheBundLandLayer">删除外滩地</button>
      <button @click="mountainPondLayer">山塘</button>
      <button @click="removeMountainPondLayer">删除山塘</button>
      <button @click="GateLayer">水闸</button>
      <button @click="removeGateLayer">删除水闸</button>
      <button @click="PumpLayer">泵站</button>
      <button @click="removePumpLayer">删除泵站</button>
      <button @click="WaterLevelLayer">水位站</button>
      <button @click="removeWaterLevelLayer">删除水位站</button>
      <button @click="HydrologyLayer">水文站</button>
      <button @click="removeHydrologyLayer">删除水文站</button>
      <button @click="TideGaugeLayer">潮位站</button>
      <button @click="removeTideGaugeLayer">删除潮位站</button>
      <button @click="ReservoirLayer">水库</button>
      <button @click="removeReservoirLayer">删除水库</button>
      <button @click="WaterLoggingCityLayer">城市内涝</button>
      <button @click="removeWaterLoggingCityLayer">删除城市内涝</button>
      <button @click="WaterNetLayer">水网</button>
      <button @click="removeWaterNetLayer">删除水网</button>
      <button @click="RoadNetLayer">路网</button>
      <button @click="removeRoadNetLayer">删除路网</button>
      <button @click="operatorTelecomLayer">通信设施(电信)</button>
      <button @click="removeOperatorTelecomLayer">删除通信设施(电信)</button>
      <button @click="operatorUnicomLayer">通信设施(联通)</button>
      <button @click="removeOperatorUnicomLayer">删除通信设施(联通)</button>
      <button @click="operatorMoveLayer">通信设施(移动)</button>
      <button @click="removeOperatorMoveLayer">删除通信设施(移动)</button>
      <button @click="operatorTowerLayer">通信设施(铁塔)</button>
      <button @click="removeOperatorTowerLayer">删除通信设施(铁塔)</button>
      <button @click="tourismLayer">旅游景区</button>
      <button @click="removeTourismLayer">删除旅游景区</button>
      <button @click="dangerousGoodsLayer">危险化学品重点企业</button>
      <button @click="removeDangerousGoodsLayer">删除危险化学品重点企业</button>
      <button @click="powerFacilitiesLayer">重要电力设施</button>
      <button @click="removePowerFacilitiesLayer">删除重要电力设施</button>
      <button @click="schoolLayer">学校</button>
      <button @click="removeSchoolLayer">删除学校</button>
      <button @click="hazardLayer">地质灾害</button>
      <button @click="removeHazardLayer">删除地质灾害</button>
      <button @click="dikePipeGasLayer">穿堤管道(输气)</button>
      <button @click="removeDikePipeGasLayer">删除穿堤管道(输气)</button>
      <button @click="waterloggingCarLayer">内涝灾害(地下停车场)</button>
      <button @click="removeWaterloggingCarLayer">删除内涝灾害(地下停车场)</button>
      <button @click="cityConstructionSiteLayer">城建建筑工地</button>
      <button @click="removeCityConstructionSiteLayer">删除城建建筑工地</button>
      <button @click="municipalConstructionSiteLayer">市政建筑工地</button>
      <button @click="removeMunicipalConstructionSiteLayer">删除市政建筑工地</button>
      <button @click="add('wharfLayer')">码头</button>
      <button @click="remove('wharfLayer')">删除码头</button>
      <button @click="add('bridgeLayer')">桥梁</button>
      <button @click="remove('bridgeLayer')">删除桥梁</button>
      <button @click="add('waterloggingTunnelLayer')">内涝灾害(隧道)</button>
      <button @click="remove('waterloggingTunnelLayer')">删除内涝灾害(隧道)</button>
      <button @click="add('trafficConstructionSiteLayer')">建筑工地(交通)</button>
      <button @click="remove('trafficConstructionSiteLayer')">建筑工地(交通)</button>
      <button @click="add('buildingLayer')">简易建筑</button>
      <button @click="remove('buildingLayer')">删除简易建筑</button>
      <button @click="add('ruralCrisisRoomLayer')">危险建筑(农村危房)</button>
      <button @click="remove('ruralCrisisRoomLayer')">删除危险建筑(农村危房)</button>
      <button @click="add('emergencySquadLayer')">抢险队</button>
      <button @click="remove('emergencySquadLayer')">删除抢险队</button>
      <button @click="add('rescueTeamLayer')">救援队</button>
      <button @click="remove('rescueTeamLayer')">删除救援队</button>
      <button @click="add('liabilityPersonLayer')">重点人员位置</button>
      <button @click="remove('liabilityPersonLayer')">删除重点人员位置</button>
      <button @click="add('defenseExpertLayer')">三防专家实时位置</button>
      <button @click="remove('defenseExpertLayer')">删除三防专家实时位置</button>
      <button @click="add('rusticateLayer')">村居</button>
      <button @click="remove('rusticateLayer')">删除村居</button>
      <button @click="add('refugeLayer')">避难所</button>
      <button @click="remove('refugeLayer')">删除避难所</button>
      <button @click="add('emergencyLayer')">物资仓库</button>
      <button @click="remove('emergencyLayer')">删除物资仓库</button>
      <button @click="add('supplyPipeLayer')">供水管网</button>
      <button @click="remove('supplyPipeLayer')">删除供水管网</button>
      <button @click="add('waterFactoryLayer')">自来水厂</button>
      <button @click="remove('waterFactoryLayer')">删除自来水厂</button>
      <button @click="add('supplyDeviceLayer')">供水设施</button>
      <button @click="remove('supplyDeviceLayer')">删除供水设施</button>
      <button @click="add('drainPipeLayer')">排水管</button>
      <button @click="remove('drainPipeLayer')">删除排水管</button>
      <button @click="add('dirtyFactoryLayer')">污水厂</button>
      <button @click="remove('dirtyFactoryLayer')">删除污水厂</button>
      <button @click="add('drainDeviceLayer')">排水设施</button>
      <button @click="remove('drainDeviceLayer')">删除排水设施</button>
      <button @click="add('hospitalLayer')">医院</button>
      <button @click="remove('hospitalLayer')">删除医院</button>
      <button @click="add('bankLayer')">银行</button>
      <button @click="remove('bankLayer')">删除银行</button>
      <button @click="add('busStationLayer')">客运站</button>
      <button @click="remove('busStationLayer')">删除客运站</button>
      <button @click="add('shopLayer')">商场</button>
      <button @click="remove('shopLayer')">删除商场</button>
      <button @click="add('drainPortLayer')">排水口</button>
      <button @click="remove('drainPortLayer')">删除排水口</button>
      <button @click="add('ironhideHouseLayer')">铁皮屋</button>
      <button @click="remove('ironhideHouseLayer')">删除铁皮屋</button>
      <button @click="add('barrackLayer')">工棚</button>
      <button @click="remove('barrackLayer')">删除工棚</button>
      <button @click="add('otherBuildLayer')">其他防风敏感建筑</button>
      <button @click="remove('otherBuildLayer')">删除其他防风敏感建筑</button>
      <button @click="addDrawUtilLayer">增加画图工具</button>
      <button @click="removeDrawUtilLayer">删除画图工具</button>
      <button @click="addDraw('Point')">增加点</button>
      <!-- <button @click="editDraw('Point')">修改点</button>
      <button @click="delDraw('Point')">删除点</button> -->
      <button @click="addDraw('LineString')">增加线</button>
      <!-- <button @click="editDraw('LineString')">修改线</button>
      <button @click="delDraw('LineString')">删除线</button> -->
      <button @click="addDraw('Polygon')">增加多边形</button>
      <!-- <button @click="editDraw('Polygon')">修改多边形</button>
      <button @click="delDraw('Polygon')">删除多边形</button> -->
      <button @click="addDraw('Circle')">增加圆形</button>
      <!-- <button @click="editDraw('Circle')">修改圆形</button>
      <button @click="delDraw('Circle')">删除圆形</button> -->
      <button @click="addDraw('Square')">增加任意矩形</button>
      <!-- <button @click="editDraw('Square')">修改任意矩形</button>
      <button @click="delDraw('Square')">删除任意矩形</button> -->
      <button @click="addDraw('Box')">增加矩形</button>
      <button @click="editDraw">修改</button>
      <button @click="delDraw">删除</button>
      <button @click="delAllDraw">删除所有绘制</button>
      <button @click="removeDrawUtil">清楚绘制或修改状态</button>
      <button @click="drawGetLayerGeoJson">获取图层geoJson</button>
    </div>
    <!-- <div class="map" ref="map"></div> -->
    <div ref="wrapper" class="map">
      <Map
        ref="map"
        :isNeedChosen="true"
        :isNeedClick="true"
        :isNeedSizeChange="true"
        :isNeedShowModal="true"
        :isNeedScaleLine="true"
        @mapClick="mapClick"
        @mapSizeChange="mapSizeChange"
        @mapOnLoad="mapOnLoad"></Map>
    </div>
    <!-- <InteractModal class="interact-modal" ref="modal">
      <WaterLoggingCity stnNo="0000000016"></WaterLoggingCity>
    </InteractModal> -->
  </div>
</template>

<script>
  import { Maps, Utils, Components } from './Gykj_map'
  // import InteractModal from './Gykj_map/public/interact-modal/interact-modal'
  // import WaterLoggingCity from './Gykj_map/info/water/waterLoggingCity'

  export default {
    components: {
      Map: Components.initMap
      // InteractModal,
      // WaterLoggingCity
    },
    mounted () {
      setTimeout(() => {
        // this.initMap()
        // this.$refs['modal'].showModal()
        this.Map = this.$refs['map'].getMap()
      }, 20)
    },
    data () {
      return {
        Map: null,
        layers: {}
      }
    },
    methods: {
      addDrawUtilLayer () {
        this.$refs['map'].addLayer({
          layerName: 'drawUtilLayer',
          layerOptions: {
            typeStyle: {
              PointFillColor: 'red'
            },
            onDrawStart: (res) => {
              console.log(res)
            },
            onDrawEnd: (res) => {
              console.log(res)
            },
            onModifySelect: (res) => {
              console.log(res)
            },
            onModifySelectChange: (res) => {
              console.log(res)
            }
          }
        })
        // if (this.layers['drawUtilLayer'] !== undefined) {
        //   return
        // }
        // const res = Maps.drawUtilLayer({
        //   layerOptions: {
        //     Map: this.Map,
        //     typeStyle: {
        //       PointFillColor: 'red'
        //     },
        //     onDrawStart: (res) => {
        //       // console.log(res)
        //     },
        //     onDrawEnd: (res) => {
        //       // console.log(res)
        //     },
        //     onModifySelect: (res) => {
        //       // console.log(res)
        //     },
        //     onModifySelectChange: (res) => {
        //       // console.log(res)
        //     }
        //   }
        // })

        // this.$set(this.layers, 'drawUtilLayer', res)
        // this.Map.addLayer(this.layers['drawUtilLayer'].layer)
      },
      removeDrawUtilLayer () {
        this.$refs['map'].removeLayer({ layerName: 'drawUtilLayer' })
        // if (this.layers['drawUtilLayer'] === undefined) {
        //   return
        // }

        // this.layers['drawUtilLayer'].removeDrawUtil()
        // this.Map.removeLayer(this.layers['drawUtilLayer'].layer)
        // this.$delete(this.layers, 'drawUtilLayer')
      },
      removeDrawUtil () {
        this.$refs['map'].removeDrawUtil()
      },
      addDraw (type) {
        this.$refs['map'].addDraw({ type })
        // if (this.layers['drawUtilLayer'] === undefined) {
        //   return
        // }
        // this.layers['drawUtilLayer'].addDraw({ type })
      },
      editDraw () {
        this.$refs['map'].editDraw()
        // if (this.layers['drawUtilLayer'] === undefined) {
        //   return
        // }

        // this.layers['drawUtilLayer'].editDraw()
      },
      delDraw (type) {
        this.$refs['map'].deleteDraw()
        // if (this.layers['drawUtilLayer'] === undefined) {
        //   return
        // }

        // this.layers['drawUtilLayer'].deleteDraw()
      },
      delAllDraw () {
        this.$refs['map'].deleteAllDraw()
        // if (this.layers['drawUtilLayer'] === undefined) {
        //   return
        // }

        // this.layers['drawUtilLayer'].deleteAllDraw()
      },
      drawGetLayerGeoJson () {
        const geoJson = this.$refs['map'].getDrawLayerGeoJson()
        // if (this.layers['drawUtilLayer'] === undefined) {
        //   return
        // }

        // const geoJson = this.layers['drawUtilLayer'].getDrawLayerGeoJson()
        console.log(geoJson)
      },
      mapClick (obj) {
        console.log(obj)
      },
      mapSizeChange (obj) {
        // console.log(obj)
      },
      mapOnLoad (MapWrapper) {
        // console.log(Map)
      },
      add (layerName) {
        this.$refs['map'].addLayer({
          layerName,
          layerOptions: {
            isCustom: false,
            data: [
              {
                '纬度': '22.7800600000',
                '经度': '112.5823600000'
              }
            ]
          }
        })
      },
      remove (layerName) {
        this.$refs['map'].removeLayer({ layerName })
      },
      WaterNetLayer () {
        this.$refs['map'].addLayer({ layerName: 'waterNetLayer' })
      },
      removeWaterNetLayer () {
        this.$refs['map'].removeLayer({ layerName: 'waterNetLayer' })
      },
      RoadNetLayer () {
        this.$refs['map'].addLayer({ layerName: 'roadNetLayer' })
      },
      removeRoadNetLayer () {
        this.$refs['map'].removeLayer({ layerName: 'roadNetLayer' })
      },
      WeatherWarningLayer () {
        this.$refs['map'].addLayer({
          layerName: 'weatherWarningLayer',
          layerOptions: {
            isCustom: true,
            apiUrl: '',
            data: [
              {
                lat: '22.7800600000',
                lng: '112.5823600000',
                content: [
                  {
                    data_time: '2019-01-24 10:13:38',
                    description: '森林火险橙色预警信号',
                    headline: '森林火险橙色预警信号',
                    level: 'J4',
                    type: '森林火险橙色预警信号'
                  }
                ]
              }
            ]
          }
        })
        // const res = await Maps.weatherWarningLayer()
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
      },
      removeWeatherWarningLayer () {
        this.$refs['map'].removeLayer({
          layerName: 'weatherWarningLayer'
        })
      },
      TyphoonLayer () {
        this.$refs['map'].addLayer({
          layerName: 'typhoonLayer',
          layerOptions: {
            typhoonTitleClass: '111',
            typhoonControlClass: '222',
            typhoonInfoClass: '333'
          }
        })
      },
      removeTyphoonLayer () {
        this.$refs['map'].removeLayer({ layerName: 'typhoonLayer' })
      },
      CloudAnimation () {
        // this.layers['cloudLayer'].interval(this.layers['cloudLayer'])
        this.$refs['map'].refreshAnimate({ layerName: 'cloudLayer' })
      },
      async CloudLayer () {
        // const res = await Maps['cloudLayer']({
        //   layerOptions: {
        //     Map: this.Map, // 必传，你的地图实例
        //     Layers: this.layers, // 必传，你的存放所有地图图层的变量
        //     Dom: this.$refs['wrapper'], // 必传，存放云图时间的Dom，需要你传入真正的dom
        //     isCustom: false, // 选传，设置为自定义数据图层，为true时，必须传入apiUrl或者data
        //     apiUrl: '', // 选传，可传入api源路径，需注意，传入api源是不能配置请求参数的
        //     data: [], // 选传，可直接传入数据，传入的数据字段必须和默认api源数据字段吻合
        //     cloudRadarClass: 'cloudClass' // 选传，可通过添加cloudRadarClass，可改变显示时间的样式
        //   }
        // })
        // if (res.code === Utils.ERR_OK) {
        //   this.$set(this.layers, 'cloudLayer', res)
        // }

        this.$refs['map'].addLayer({
          layerName: 'cloudLayer',
          layerOptions: {
            cloudRadarClass: '2222'
          }
        })
        // const res = await Maps.cloudLayer()
        // this.$set(this.layers, res.layerName, res)

        // 需要动画写法
        // Utils.createAnimate({
        //   Map: this.Map,
        //   ...res.animateData
        // }, () => {
        //   this.Map.addLayer(this.layers['cloudLayer'].layer)
        //   this.layers['cloudLayer'].interval(this.layers['cloudLayer'])
        // })

        // 不需要动画写法
        // this.Map.addLayer(this.layers['cloudLayer'].layer)
        // this.layers['cloudLayer'].interval(this.layers['cloudLayer'])
      },
      removeCloudLayer () {
        this.$refs['map'].removeLayer({ layerName: 'cloudLayer' })
      },
      RadarAnimation () {
        // this.layers['radarLayer'].interval(this.layers['radarLayer'])
        this.$refs['map'].refreshAnimate({
          layerName: 'radarLayer'
        })
      },
      async RadarLayer () {
        this.$refs['map'].addLayer({
          layerName: 'radarLayer',
          layerOptions: {
            cloudRadarClass: '3333'
          }
        })
        // const res = await Maps.radarLayer()
        // this.$set(this.layers, res.layerName, res)

        // 需要动画写法
        // Utils.createAnimate({
        //   Map: this.Map,
        //   ...res.animateData
        // }, () => {
        //   this.Map.addLayer(this.layers['radarLayer'].layer)
        //   this.layers['radarLayer'].interval(this.layers['radarLayer'])
        // })

        // 不需要动画写法
        // this.Map.addLayer(this.layers['radarLayer'].layer)
        // this.layers['radarLayer'].interval(this.layers['radarLayer'])
      },
      removeRadarLayer () {
        this.$refs['map'].removeLayer({ layerName: 'radarLayer' })
      },
      BanksLayer () {
        // 使用堤围必须导入 /static/kml/banks 文件夹
        this.$refs['map'].addLayer({layerName: 'banksLayer'})
        // const res = Maps.banksLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
      },
      removeBanksLayer () {
        this.$refs['map'].removeLayer({ layerName: 'banksLayer' })
      },
      CriticalsLayer () {
        // 使用险段必须导入 /static/kml/criticals 文件夹
        this.$refs['map'].addLayer({layerName: 'criticalsLayer'})
        // const res = Maps.criticalsLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
      },
      removeCriticalsLayer () {
        this.$refs['map'].removeLayer({ layerName: 'criticalsLayer' })
      },
      DikeEngineeringLayer () {
        this.$refs['map'].addLayer({
          layerName: 'dikeEngineeringLayer'
        })
      },
      removeDikeEngineeringLayer () {
        this.$refs['map'].removeLayer({ layerName: 'dikeEngineeringLayer' })
      },
      midRiverLandLayer () {
        this.$refs['map'].addLayer({
          layerName: 'midRiverLandLayer'
        })
      },
      removeMidRiverLandLayer () {
        this.$refs['map'].removeLayer({ layerName: 'midRiverLandLayer' })
      },
      theBundLandLayer () {
        this.$refs['map'].addLayer({
          layerName: 'theBundLandLayer'
        })
      },
      removeTheBundLandLayer () {
        this.$refs['map'].removeLayer({ layerName: 'theBundLandLayer' })
      },
      mountainPondLayer () {
        this.$refs['map'].addLayer({
          layerName: 'mountainPondLayer',
          layerOptions: {
            isCustom: true,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', '名称': '888' }
            ]
          }
        })
      },
      removeMountainPondLayer () {
        this.$refs['map'].removeLayer({ layerName: 'mountainPondLayer' })
      },
      GateLayer () {
        this.$refs['map'].addLayer({
          layerName: 'gateLayer',
          layerOptions: {
            isCustom: true,
            apiUrl: '',
            data: [
              { stalong: '113.0277943611145', stalat: '23.152345418930057', realtime_data: { aa: '' } }
            ]
          }
        })
        // const res = await Maps.gateLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.$refs['map'].addLayer(this.layers[res.layerName].layer)
        // this.$refs['map'].addOverlayer(this.layers[res.layerName].overLayerArr)
        // this.Map.addLayer(this.layers[res.layerName].layer)
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
        // Utils.isShowOverLayer(this.Map, res.hideClass)
      },
      removeGateLayer () {
        this.$refs['map'].removeLayer({ layerName: 'gateLayer' })
      },
      async PumpLayer () {
        this.$refs['map'].addLayer({
          layerName: 'pumpLayer',
          layerOptions: {
            isCustom: true,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', realtime_data: {} }
            ]
          }
        })
        // const res = await Maps.pumpLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
        // Utils.isShowOverLayer(this.Map, res.hideClass)
      },
      removePumpLayer () {
        this.$refs['map'].removeLayer({ layerName: 'pumpLayer' })
      },
      async WaterLevelLayer () {
        this.$refs['map'].addLayer({
          layerName: 'waterLevelLayer',
          layerOptions: {
            isCustom: false,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', realtime_data: {} }
            ]
          }
        })
        // const res = await Maps.waterLevelLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
      },
      removeWaterLevelLayer () {
        this.$refs['map'].removeLayer({ layerName: 'waterLevelLayer' })
      },
      async HydrologyLayer () {
        this.$refs['map'].addLayer({
          layerName: 'hydrologyLayer',
          layerOptions: {
            isCustom: true,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', realtime_data: {} }
            ]
          }
        })
        // const res = await Maps.hydrologyLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
      },
      removeHydrologyLayer () {
        this.$refs['map'].removeLayer({ layerName: 'hydrologyLayer' })
      },
      async TideGaugeLayer () {
        this.$refs['map'].addLayer({
          layerName: 'tideGaugeLayer',
          layerOptions: {
            isCustom: false,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', realtime_data: {} }
            ]
          }
        })
        // const res = await Maps.tideGaugeLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
      },
      removeTideGaugeLayer () {
        this.$refs['map'].removeLayer({ layerName: 'tideGaugeLayer' })
      },
      async ReservoirLayer () {
        this.$refs['map'].addLayer({
          layerName: 'reservoirLayer',
          layerOptions: {
            isCustom: false,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', realtime_data: { aa: ' ' } }
            ]
          }
        })
      },
      removeReservoirLayer () {
        this.$refs['map'].removeLayer({ layerName: 'reservoirLayer' })
      },
      async WaterLoggingCityLayer () {
        this.$refs['map'].addLayer({
          layerName: 'waterLoggingCityLayer',
          layerOptions: {
            isCustom: false,
            data: [
              { lng: '113.0277943611145', lat: '23.152345418930057', realtime_data: {} }
            ]
          }
        })
        // const res = await Maps.waterLoggingCityLayer()
        // this.$set(this.layers, res.layerName, res)
        // this.Map.addLayer(this.layers[res.layerName].layer)
        // res.overLayerArr.map(item => {
        //   this.Map.addOverlay(item)
        // })
        // Utils.isShowOverLayer(this.Map, res.hideClass)
      },
      removeWaterLoggingCityLayer () {
        this.$refs['map'].removeLayer({ layerName: 'waterLoggingCityLayer' })
      },
      operatorTelecomLayer () {
        this.$refs['map'].addLayer({
          layerName: 'operatorTelecomLayer'
        })
      },
      removeOperatorTelecomLayer () {
        this.$refs['map'].removeLayer({ layerName: 'operatorTelecomLayer' })
      },
      operatorUnicomLayer () {
        this.$refs['map'].addLayer({
          layerName: 'operatorUnicomLayer'
        })
      },
      removeOperatorUnicomLayer () {
        this.$refs['map'].removeLayer({ layerName: 'operatorUnicomLayer' })
      },
      operatorMoveLayer () {
        this.$refs['map'].addLayer({
          layerName: 'operatorMoveLayer'
        })
      },
      removeOperatorMoveLayer () {
        this.$refs['map'].removeLayer({ layerName: 'operatorMoveLayer' })
      },
      operatorTowerLayer () {
        this.$refs['map'].addLayer({
          layerName: 'operatorTowerLayer'
        })
      },
      removeOperatorTowerLayer () {
        this.$refs['map'].removeLayer({ layerName: 'operatorTowerLayer' })
      },
      tourismLayer () {
        this.$refs['map'].addLayer({
          layerName: 'tourismLayer'
        })
      },
      removeTourismLayer () {
        this.$refs['map'].removeLayer({ layerName: 'tourismLayer' })
      },
      dangerousGoodsLayer () {
        this.$refs['map'].addLayer({
          layerName: 'dangerousGoodsLayer'
        })
      },
      removeDangerousGoodsLayer () {
        this.$refs['map'].removeLayer({ layerName: 'dangerousGoodsLayer' })
      },
      powerFacilitiesLayer () {
        this.$refs['map'].addLayer({
          layerName: 'powerFacilitiesLayer'
        })
      },
      removePowerFacilitiesLayer () {
        this.$refs['map'].removeLayer({ layerName: 'powerFacilitiesLayer' })
      },
      schoolLayer () {
        this.$refs['map'].addLayer({
          layerName: 'schoolLayer'
        })
      },
      removeSchoolLayer () {
        this.$refs['map'].removeLayer({ layerName: 'schoolLayer' })
      },
      hazardLayer () {
        this.$refs['map'].addLayer({
          layerName: 'hazardLayer'
        })
      },
      removeHazardLayer () {
        this.$refs['map'].removeLayer({ layerName: 'hazardLayer' })
      },
      dikePipeGasLayer () {
        this.$refs['map'].addLayer({
          layerName: 'dikePipeGasLayer'
        })
      },
      removeDikePipeGasLayer () {
        this.$refs['map'].removeLayer({ layerName: 'dikePipeGasLayer' })
      },
      waterloggingCarLayer () {
        this.$refs['map'].addLayer({
          layerName: 'waterloggingCarLayer'
        })
      },
      removeWaterloggingCarLayer () {
        this.$refs['map'].removeLayer({ layerName: 'waterloggingCarLayer' })
      },
      cityConstructionSiteLayer () {
        this.$refs['map'].addLayer({
          layerName: 'cityConstructionSiteLayer'
        })
      },
      removeCityConstructionSiteLayer () {
        this.$refs['map'].removeLayer({ layerName: 'cityConstructionSiteLayer' })
      },
      municipalConstructionSiteLayer () {
        this.$refs['map'].addLayer({
          layerName: 'municipalConstructionSiteLayer'
        })
      },
      removeMunicipalConstructionSiteLayer () {
        this.$refs['map'].removeLayer({ layerName: 'municipalConstructionSiteLayer' })
      },
      initMap () {
        const layers = [
          Maps.baseLayer(),
          Maps.FsNhBorderLayer(),
          Maps.FsNhTownLayer(),
          Maps.warnLineLayer()
        ]

        this.Map = Maps.createMap({
          el: this.$refs['map'],
          layers
        })

        this.Map.on('singleclick', (event) => {
          const pixel = event.pixel
          // const lng = event.coordinate[0]
          // const lat = event.coordinate[1]
          const features = []
          const layerNames = []

          // console.log(lng, lat)

          this.Map.forEachFeatureAtPixel(pixel, (feature, layer) => {
            features.push(feature)
            if (layer) {
              layerNames.push(layer.get('name') === null ? '' : layer.get('name'))
            }
          })

          if (features.length) {
            const layerName = layerNames[0]
            this.layers[layerName].showModal(features[0])
          }
        })

        this.Map.getView().on('propertychange', (e) => {
          Utils.isShowOverLayer(this.Map)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .map-demo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .buttons {
      width: 300px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .map {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 300px;
      right: 0px;
    }
    .pump {
      width: 600px;
      height: 500px;
      background-color: white;
      position: absolute;
      top: 100px;
    }
    .interact-modal {
      width: 810px;
		  height: 500px;
    }
  }
</style>

